<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item, index) of imageList">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="handlePreview(index)"></image>
				</view>
				<text class="text">
					{{ item.comment }}
					<br />
					---{{ item.shop }}
					<br />
					{{ index + 1 }}
				</text>
			</view>
			
			<view class="float" v-show="isShow">
				<view class="reload" @click="handleReload">
					<uni-icons type="refreshempty" size="30"></uni-icons>
				</view>
				<view class="totop" @click="handleTotop">
					<uni-icons type="arrow-up" size="30"></uni-icons>

				</view>
			</view>
		</view>
		
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onReady, onReachBottom, onPullDownRefresh,onLoad,onPageScroll } from '@dcloudio/uni-app';

const imageList = ref([]);

const isShow = ref(false)
uni.hideLoading()

// 点击预览图片
const handlePreview = (i) => {
	uni.previewImage({
		urls: imageList.value.map((e) => e.url),
		current: i
	});
};

// 获取数据函数
const getData = async (num) => {
	const res = await uni
		.request({
			url: 'https://tea.qingnian8.com/tools/taoShow',
			data: {
				size: num
			}
		})
	imageList.value.push(...res.data.data);
};

// 返回顶部时间，ms
const scrollTopTime = 200

// 返回顶部
const handleTotop = ()=>{
	uni.pageScrollTo({
		scrollTop: 0,
		duration: scrollTopTime
	})

}


// 刷新
const handleReload =async ()=>{
	handleTotop()
	setTimeout(()=>{
		uni.startPullDownRefresh()
	},scrollTopTime)
		

	
}





// 页面更新加载数据
onReady(() => getData(10));

// 触底加载更多
onReachBottom(() => getData(5));

// 下拉刷新
onPullDownRefresh(() => {
	uni.hideToast()
	imageList.value = []
	getData(10)
	// setTimeout(()=>{
		uni.stopPullDownRefresh()
	// },500)
	
});

// 滚动监听，显示“刷新” “顶部”
onPageScroll(e=>{
	if(e.scrollTop>=1200) isShow.value = true
	else isShow.value = false
})
</script>
<style scoped lang="scss">
.container {
	margin: 50rpx;

	.layout {
		.box {
			margin-bottom: 50rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
			border-radius: 30rpx;
			overflow: hidden;

			.pic {
				image {
					width: 100%;
				}
			}

			.text {
				display: block;
				padding: 30rpx;
			}
		}
		
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 50rpx;
			
			.reload,.totop{
				width: 80rpx;
				height: 80rpx;
				background-color: rgba(255, 255, 255, .65);
				border-radius: 50%;
				margin-top: 30rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	
	
	.loadMore{
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	}
}
</style>
<style></style>
